<template>
  <el-card shadow="never" class="decs">
    <h2>{{ appInfo.app_name }}</h2>
    <div class="decs-list">
      <el-divider content-position="left">最后更新时间</el-divider>
      <p>{{ appInfo.updated_at }}</p>
      <el-divider content-position="left">应用介绍</el-divider>
      <div class="description" v-html="appInfo.description"></div>
    </div>
  </el-card>
  <el-card shadow="never" class="card" style="margin-top: 10px;">
    <el-button type="primary" @click="openGlobalParams">设置全局参数</el-button>
    <el-button type="danger" @click="clearGlobalParams">清除全局参数</el-button>
    <el-button type="warning" @click="getAccessToken">生成AccessToken</el-button>
    <el-collapse v-model="activeName" accordion style="margin-top: 15px;">
      <el-collapse-item
        :title="item.name"
        :name="index.toString()" v-for="(item, index) in appInfo.apis"
        :key="index"
      >
        <div class="miaoshu">
          <el-tooltip content="点击复制">
            <el-tag
              size="large"
              class="interface-url"
              @click="async () => {
                try{
                  await this.clipboard(`/api/v1/${item.access_name}`)
                  $message.success(this.$t('sys.copy_success'))
                } catch(e) {
                  $message.error(this.$t('sys.copy_fail'))
                }
              }">
              /api/v1/{{ item.access_name }}
            </el-tag>
          </el-tooltip>
          <el-tag type="success" size="large" v-if="item.request_mode === 'A' ">ALL</el-tag>
          <el-tag type="warning" size="large" v-if="item.request_mode === 'P' ">POST</el-tag>
          <el-tag type="danger" size="large" v-if="item.request_mode === 'G' ">GET</el-tag>
          <el-button type="primary" class="details" @click="details(item)">查看详情</el-button>
        </div>
        <div>
          <el-divider content-position="left">更新时间</el-divider>
          <p>{{ item.updated_at }}</p>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-card>

  <details-page ref="details" />

  <global-params ref="GlobalParams" />
</template>

<script>
import DetailsPage from './components/details'
import GlobalParams from './components/globalParams'
import { request } from '@/utils/request.js'
export default {
  components: {
    GlobalParams,
    DetailsPage
  },
  async created() {
    await this.getAppInfo()
  },
  data () {
    return {
      activeName: '0',
      appInfo: {},
      dialogVisible: false,
    }
  },
  methods: {
    async getAppInfo() {
      let res = await this.$API.apiDoc.getAppAndInterfaceList(this.$TOOL.data.get('appId'))
      this.appInfo = res.data
    },

    details(row) {
      this.$nextTick(() => {
        this.$refs.details.open(row)
      })
    },

    genSign() {
      let timestamp = Date.now()
      let obj = {
        app_id: this.appInfo.app_id,
        timestamp,
        app_secret: this.appInfo.app_secret,
        sign_ver: "1.0",
      }

      let keysSorted = Object.keys(obj).sort((x, y) => {
        if(x < y) return 1
        else if(x > y) return -1
        else return 0
      })

      let newObj = {}

      for (let i=0; i < keysSorted.length; i++) {
        newObj[keysSorted[i]] = obj[keysSorted[i]];
      }

      let signature = this.$TOOL.crypto.MD5(this.$TOOL.httpBuild(newObj))

      return {
        app_id: this.appInfo.app_id,
        signature,
        timestamp,
      }


    },

    getAccessToken() {
      let url = '/api/v1/getAccessToken?' + this.$TOOL.httpBuild(this.genSign())
      
      request({ url, method: 'post' }).then(async res => {
        if (res.success) {
          try{
            await this.clipboard(res.data.access_token)
            this.$message.success('获取成功，已复制到剪切板')
          } catch(e) {
            $message.error(this.$t('sys.copy_fail'))
          }
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e)
      })
    },

    openGlobalParams() {
      this.$nextTick(() => {
        this.$refs.GlobalParams.open()
      })
    },

    clearGlobalParams() {
      this.$TOOL.session.remove('globalParams')
      this.$message.success('清除成功')
    },
  }

}
</script>

<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding-top: 0 !important;
}
.decs {
  /* background: linear-gradient(160deg, #fff, #effbff, #dcf6ff); */
  font-size: 14px;
}
.decs-list p {
  line-height: 25px;
}
.decs-list .description {
  line-height: 25px;
}
.interface-url {
  cursor: pointer;
}
.miaoshu {
  position: relative;
}
.details {
  position: relative; top: -1px; margin-left: 30px;
}
</style>